<extend name="Common:base" />
<block name="head">
  <style>
    /* .el-table__body tr.current-row>td{
      background: rgba(157, 195, 232, 0.7);
    } */
  </style> 
</block>
<block name="body">
	<div id="app" class="container">
		<div class="wrapp" v-show="show" style="display: none">
			<!-- seach form -->
			<el-row>
				<el-col :span="24">
					<el-form :inline="true" ref="searchForm" :model="searchForm">

						<el-form-item prop="department_id" style="width: 120px">
							<el-select v-model="searchForm.department_id" size="small" clearable @change="departmentChange" placeholder="部门">
								<el-option v-for="item in departments" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item prop="group_id" style="width: 120px">
							<el-select v-model="searchForm.group_id" size="small" clearable placeholder="团队小组">
								<el-option v-for="item in groups" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item prop="realname" style="width: 120px">
							<el-input v-model="searchForm.realname" size="small"  placeholder="输入负责人姓名" >
							</el-input>
						</el-form-item>
						<el-form-item prop="phone" style="width: 120px">
							<el-input v-model="searchForm.phone" size="small"  placeholder="输入联系电话" >
							</el-input>
						</el-form-item>
					  <el-form-item>
					    <el-button type="primary" size="small" @click="loadDatalist" icon="search">查询</el-button>
					    <el-button size="small"  @click="searchReset">重置</el-button>
			        	<!-- <el-button  @click="openDialog('advancedSearch')" icon="search">高级查询</el-button>  -->
					  </el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<!-- / search form -->

			<!-- datatables  -->
			<el-row>
				<el-col :span="24">
					<el-table 
					:data="dataList"  
					border  highlight-current-row
					v-loading="dataLoad"  
					element-loading-text="拼命加载中"
          @row-dblclick="choseRow"
          @row-click="handleSelectionChange">
					    
					    <el-table-column type="index" :formatter="handleIndex" width="65" align="center" label="序号" >
					    </el-table-column>
					    <el-table-column label="部门" align="left" prop="db_name">
              </el-table-column>
					    <el-table-column label="团队小组名称" align="left" prop="name">
					    </el-table-column>

					    <el-table-column  inline-template :context="_self"  align="center" label="形象照片" width="100">
					       <div>
					    	<el-tooltip content="点击放大图片" placement="right">
					    	 <img :src="imgUrl(row.img)" @click="bigImg(row.img)" alt="点击放大图片" width="45px" height="45px">
					    	</el-tooltip>	
					       </div>
					    </el-table-column>

						<el-table-column label="联系人(负责人)" prop="realname">
					    </el-table-column>
						<el-table-column label="联系电话" align="center" prop="phone">
					    </el-table-column>
						<el-table-column label="是否启用" :context="_self" align="center" prop="status">
					     <template scope="scope">
  							<div>
  						    <el-switch
  								  v-model="scope.row.switch"
  								  on-color="#13ce66"
  								  off-color="#ff4949" 
  								  @change="switchHandle(scope.$index, scope.row)">
  								</el-switch>
  							</div>
              </template>
					 </el-table-column>
					    <el-table-column label="说明备注" align="center" prop="remark">
					    </el-table-column>
					    <el-table-column :context="_self"  fixed="right"  label="操作" align="center" width="155" >
					     <template scope="scope">
					      <span>
					        <el-button @click="handleEdit(scope.$index, scope.row)" type="info" size="small">编辑</el-button>
					        <el-button @click="handleDelete(scope.$index,scope.row)"  type="danger" size="small">删除</el-button>
					      </span>
					     </template>
					    </el-table-column>
				    </el-table>
				</el-col>
			</el-row>
			<!-- / datatables  -->


			<!-- toolbar -->
			<el-row type="type"  justify="space-between" align="middle"  class="row-bg">
			  <el-col :span="12">
				  <div class="grid-content bg-purple">
				  	<span class="wrapper">
	                  <el-tooltip content="添加新的团队小组" placement="right">
	                    <el-button size="small" @click="openDialog('add')" icon="plus" type="primary">添加
	                    </el-button>
	                  </el-tooltip>

                      <el-tooltip content="添加新的成员" placement="right">
                        <el-button size="small" @click="openDialog('addMember')" icon="plus" type="primary">添加成员
                        </el-button>
                      </el-tooltip>
					</span>
				  </div>
			  </el-col>
			  <el-col :span="12">
				  <div class="grid-content bg-purple-light pull-right">
				    <!-- page -->
				    	<include file="Common:_pagination" />
				    <!-- / page -->
				  </div>
			  </el-col>
			</el-row>
			<!-- / toolbar -->

            <el-row>
                <el-col :span="24">
                    <el-tabs  >
                      <el-tab-pane label="团队成员">
                        <el-table 
                        :data="tableData"  
                        empty-text="请点击小组" 
                        border
                        @selection-change="delSelect"
                         >
                          <el-table-column type="selection"  width="50" :selectable="selectable">
                          </el-table-column>
                          <el-table-column prop="user_id" label="员工ID" width="180" align="center">
                          </el-table-column>
                          <el-table-column prop="realname" label="员工姓名" width="180" align="center">
                          </el-table-column>
                          <el-table-column prop="type" label="员工类型" width="180" align="center">
                          </el-table-column>
                          <el-table-column prop="phone" label="手机" align="center">
                          </el-table-column>
                          <el-table-column prop="qq"   label="QQ号" align="center">
                           <template scope="scope">
                            {{ scope.row.qq }}
                            <a v-if="scope.row.qq" :href="getTenct(scope.row.qq)">
                              <img width="30"  src="__PUBLIC__/images/0df431adcbef7609bca7d58a2adda3cc7cd99e73_r2_c2.jpg" alt="">
                            </a>
                          </template>
                          </el-table-column>
                          
                        </el-table>
                      </el-tab-pane>
                      <!-- <el-tab-pane label="软件账号">软件账号</el-tab-pane>
                      <el-tab-pane label="通话记录">通话记录</el-tab-pane>
                      <el-tab-pane label="客户资料">客户资料</el-tab-pane> -->
                    </el-tabs>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-button type="primary" size="small" @click="removeMember">移除成员</el-button>
                </el-col>
            </el-row>


            

		</div>

		<div class="dialogWrapper" v-show="show" style="display: none">
			<!-- 高级查询 -->
			
			<!-- / 高级查询 -->

			<!-- 添加 -->
			<include file="_add" />
			<!-- / 添加 -->

			<!-- 编辑 -->
			<include file="_edit" />
			<!-- / 编辑 -->
            
			<!-- 终止小组(暂时去掉) -->
			<include file="_stop" />
			<!-- / stop -->

            <include file="_addMember" />


			<!-- bifimg -->
			<el-dialog  title="图片放大" :modal="false" size="small" v-model="bigimg" style="z-index:1000;">
			  <div style="margin:0;padding:0;text-align:center;z-index:1000;">
			  	<img :src="imageUrl" style="margin-left:-14px;width:850px;height:550px;">
			  </div>
			</el-dialog>
			<!-- bigimg -->
		</div>
		
	</div>
</block>
<block name="scripts">
<script>
  page.getGroupMemberUrl = "{:U('getEmployeesByGroupId')}";
  page.setGroupMemberUrl = "{:U('setEmployees')}";
  page.removeMemberUrl   = "{:U('removeMember')}";
  page.getMemberUrl      = "{:U('getMemberList')}";

  page.getUsersUrl = "{:U('getUsers')}";


  window.defaultOption.setDatas({
  	 //传输照片上传地址
  	 pathInfo:{folder:'group'},
     //放大照片
     bigimg:false,
     //放大图片地址
     imageUrl:'',

     //状态值
     statusForm:{
        id:0,
        status:'1',
     },

     fileList:[
       {name:'',url:''}
     ],
     rules:{
             name:[
                { required: true, message: '请填写单位名称', trigger: 'blur' },
             ],
             department_id:[
                { required: true, message: '请选择上级部门', trigger: 'blur' },
             ],
             
	 },
     contactList:{:json_encode($contactList)},
     namelist:{:json_encode($namelist)},
     // memberList:{:json_encode($memberList)},
     memberList:[],
     tableData:[],
     multipleSelection:[],
     secondSelection:[],
	  departments:{:json_encode($departments['list'])},
  groups:{:json_encode($departments['group'])}
  }).setForm('add',{
  	id:'',
  	name:"",
  	user_id:"",
    department_id:"",
  	status:1,
  	remark:"",
  	img:'',
  }).setForm('edit',{
  	id:'',
  	name:"",
  	user_id:"",
    department_id:"",
  	//status:0,
  	remark:"",
  	img:'',
  }).setForm('search',{
      group_id:"",
	  input:"",
	  realname:"",
	  phone:"",
	  sortFiled:"id",
	  department_id:{:json_encode($departments['account'][0]['id'])},
	  sortWay:"asc" // desc
  }).setForm('addMember',{
    id:0,
    name:"",
    user_ids:[]
  }, true ).setMethod('imgUrl',function(url){
  	 return "__ROOT__/Upload/group/"+url
  }).setMethod('departmentChange',function () {
	  var vmThis=this
	  vmThis.$http.get('{:U("getGroups")}',{params:{department_id:vmThis.searchForm.department_id}}).then(function (response) {
		  vmThis.groups=response.body
		  vmThis.searchForm.group_id=''
      })

  }).setMethod('bigImg',function(url){
  	this.bigimg=true;
  	this.imageUrl=this.imgUrl(url);
  }).setMethod('uploadImg',function(response,file,fileList){
  	this.addForm.img=response.path;
  	return response.path;
  }).setMethod('uploadImg_E',function(response,file,fileList){
  	this.editForm.img=response.path;
  }).setMethod('handleEdit',function(index,row){
	//将此行数据赋给editForm
	var type='edit';
	this.initObject(this[FormName.getFormName(type)] , row); 
	//设置显示的图片
	this.fileList = [{name:row.img, url: this.imgUrl(row.img)}];
	this.editIndex = index;
	this.openDialog(type);

  }).setMethod('beforeList',function(dataList){
  	dataList.forEach(function(currentValue,index){
  		currentValue['switch']=currentValue.status==1?true:false;
        currentValue.status = parseInt(currentValue.status);
  	})
  	return dataList;
  }).setMethod('switchHandle',function(index,row){
    row.status=row.switch?'1':'0';
    this.initObject(this.statusForm, row);
    this.statusIndex=index;
    var vmThis =this;
    this.$http.post(page.editFormUrl,this.statusForm).then(function(response){
      this.searchReset();
    }).catch(function(response){
    	vmThis.$message({
    		message:'状态更改失败',
    		type:'error'
    	});
    	vmThis.dataList[vmThis.statusIndex].switch = !vmThis.dataList[vmThis.statusIndex].switch;
    });
  }).setMethod('choseRow', function(row){
        //赶急 这里暂时这么写
     this.$http.get(page.getGroupMemberUrl, {params:{id:row.id}}).then(function(response){
        response.body.forEach(function(current){
            if (current.user_id == row.user_id) {
                current.type = "主管";
            } else {
                current.type = "队员"
            }
        })
        this.tableData = response.body;

      }, function(response){
        vmThis.$message({
            message:'操作失败',
            type:'error'
        });
      });
  }).setMethod('handleSelectionChange', function(val){
        this.deleteArrAllItem('multipleSelection');
        this.multipleSelection.push(val) ;
  }).setMethod('commonSelect',function(x){
    var form = x;
    var vmThis = this;
    if (this.multipleSelection.length ==0 ||  this.multipleSelection.length>1) {
      this.closeDialog(form);
      this.$message.error('请先选择一个小组');
      return false;
    } else {
      var  row = this.multipleSelection[0];
      this.row = row;
      return row;
    }
  }).setMethod('beforeAddMember', function(){
    var type = 'addMember';
    var row = this.commonSelect(type);
    var vmThis = this;
    if ( row !== false) {
        this[FormName.getFormName(type)].id = row.id;
        this[FormName.getFormName(type)].name = row.name;
        this[FormName.getFormName(type)].user_ids = [];
        
    }
    // this.resetForm(type);
    // memberList
    vmThis.$http.get(page.getMemberUrl).then(function(response){
                
                vmThis.memberList = response.body;
            }, function(response){
                vmThis.$message({
                  message: '获取备选队员失败',
                  type: 'error'
                });
            });


  }).setMethod('removeMember', function(){
    var vmThis  =this;
    var ids = [];
    var captain = false;
    vmThis.secondSelection.forEach(function(current){
         
          if (current.type == '主管') {
            captain = true;
          }
          ids.push(current.user_id);

      })

    if (captain) {
      vmThis.$message({
          message: '不能把主管删了',
          type:    'error'
        });
      return;
    }


    this.$confirm('确定移除选中的成员?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function(){
            

            vmThis.$http.post(page.removeMemberUrl, {user_ids:ids}).then(function(response){
                vmThis.$message({
                  message: '操作成功',
                  type: 'success'
                });
                // vmThis.tableData = [];
                // vmThis.choseRow(vmThis.row);
            }, function(response){
                vmThis.$message({
                  message: '操作失败',
                  type: 'error'
                });
            });
          /*vmThis.$message({
            type: 'success',
            message: '移除成功!'
          });*/
        }).catch(function(){
          vmThis.$message({
            type: 'info',
            message: '已取消删除'
          }); 
        })  
  }).setMethod('delSelect', function(v){

    this.secondSelection = v;
  }).setMethod('getUsers', function(d){
    
    this.$http.get(page.getUsersUrl,{params:{id:d}}).then(function(response){
      this.contactList = response.body;
    }, function(response){

    });
  }).setMethod('beforeOpen', function(){
    this.getUsers(0);
  }).setMethod('beforeEdit', function(){
    this.getUsers(this.dataList[this.editIndex].user_id);
  }).setMethod('selectable', function(row, index){
     return row.type=="主管" ? false : true;
  });
</script>
</block>
